<!-- 任务执行情况 -->
<template>
  <el-dialog :title="titleBox" :visible.sync="dialogTableVisible" @close="$emit('update:visible',false)"
             :close-on-click-modal="false" width="50%">
    <div class="breadcrumb-container input-val-box">
      <div class="search_box">
        <el-select placeholder="学年" v-model="searchFrom.year" size="small"
                   class="w-140 mr-10">
          <el-option :label="item.year" :value="item.id" v-for="(item, index) in yearList"
                     :key="index"></el-option>
        </el-select>
        <el-select placeholder="周" v-model="searchFrom.week" size="small"
                   class="w-140 mr-10">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in weekList"
                     :key="index"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>查询</el-button>
      <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
    </div>
    <el-table :data="historyList"
              height="400"
              :stripe="tableStyle.tableStripe"
              tooltip-effect="dark"
              ref="table">
      <el-table-column label="添加日期" align="center" prop="create_time" width="160" :key="1"></el-table-column>
      <el-table-column :label="optionData.type==1?'授出人':'被授人'" align="center" width="100" v-if="typeKey" :key="2">
        <template slot-scope="scope">
          {{ optionData.type==1?scope.row.inviter.realname:scope.row.users.realname }}
        </template>
      </el-table-column>
      <el-table-column label="日程时间段" align="center" width="100" :key="3">
        <template slot-scope="scope">
          <span style="display: block;">{{ scope.row.time }}</span>
          <span style="display: block;">{{ scope.row.hour.start_time }}-{{ scope.row.hour.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日程状态" align="center" width="100" :key="4" v-if="optionData.type">
        <template slot-scope="scope">
          <!--                    0 待审核 1 通过 2 通过 -->
          <span v-if="scope.row.status==0">待处理</span>
          <span v-if="scope.row.status==1">已生效</span>
          <span v-if="scope.row.status==2">已驳回</span>
        </template>
      </el-table-column>
      <el-table-column label="日程内容" :key="5">
        <template slot-scope="scope">
          <div class="contentBox">
            <div class="line-list-title">
              <span>详情：</span>{{ scope.row.title }}
            </div>
            <div v-if="scope.row.remind" class="line-list-remid">
              <span>提醒：</span>{{ scope.row.remind }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" v-if="typeKey!==1" :key="6">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDetel(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="page.pagesize"
        layout="prev, pager, next"
        :total="page.total"
        @current-change="handleUserChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('update:visible',false)" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {pagination, tableoption, weekList} from '@/utils/util.js'

export default {
  name: 'history',
  props: ['visible', 'optionData'],
  watch: {
    visible () {
      this.dialogTableVisible = this.visible
      if (this.visible) {
        // 0自己的日程1被别人邀请的日程2邀请别人的日程
        // 类型 0 我的 1 被授权 2我的发布
        let title = ''
        if (Number(this.optionData.type) === 0) {
          title = '我的日程历史'
        } else if (Number(this.optionData.type) === 1) {
          title = '被授权日程历史'
        } else if (Number(this.optionData.type) === 2) {
          title = '授出日程历史'
        }
        ;
        this.typeKey = Number(this.optionData.type)
        this.titleBox = title
        // 获取页面数据
        this.dayListFn()
        this.InitFn()
      } else {
        this.searchFrom.year = ''
        this.searchFrom.week = ''
      }
    }
  },
  data () {
    return {
      dialogTableVisible: this.visible,
      historyList: [],
      tableStyle: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      titleBox: '',
      typeKey: '',
      yearList: [],
      searchFrom: {
        year: '',
        week: '',
        types: ''
      },
      weekList: weekList
    }
  },
  created () {

  },
  methods: {
    // 初始化
    InitFn () {
      // types 	字符串 	必填 	1 	- 	0自己的日程1被别人邀请的日程2邀请别人的日程
      this.searchFrom.p = this.page.pageindex
      this.searchFrom.types = this.optionData.type
      this.$fetch(this.api.schedule.scheduleIndex, this.searchFrom).then((response) => {
        this.historyList = response.list.data
      }).catch((err) => {
        console.log(err)
      })
    },
    handleUserChange (val) {
      this.page.pageindex = val
    },
    handleDetel (index) {
      this.$confirm('确认删除本次日程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon (index) {
      this.$post(this.api.schedule.scheduleDelete, {id: this.historyList[index].id}).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    dayListFn () {
      this.$fetch(this.api.setting.semesterIndex, {}).then((response) => {
        for (let i in response.list) {
          if (response.list[i].type === 1) {
            response.list[i].year = response.list[i].year + ' 下学期'
          } else {
            response.list[i].year = response.list[i].year + ' 上学期'
          }
        }
        this.yearList = response.list
      }).catch((err) => {
        console.log(err)
      })
    },
    searchBtn () {
      // 搜索日程
      this.searchFrom.p = 1
      this.InitFn()
    },
    refreshFn () {
      this.searchFrom.year = ''
      this.searchFrom.week = ''
      this.InitFn()
    }
  }
}
</script>
